<template>
	<view class="page-system">
		<view class="select-box flex flex-wrap align-center padding-lr-sm bg-white">
			<block v-for="(item,index) in selectList" :key="index">
				<view class="select margin-right-sm margin-bottom-xs flex justify-center align-center text-sm" :class="{active:index===selectCur}"
				 @click="selectClick(index,item.id)">{{item.title}}</view>
			</block>
		</view>

		<view class="cu-list menu sm-border custom-list">
			<block v-for="(item,index) of list" :key="item.id">
				<view class="cu-item text-sm">
					<view class="flex flex-direction justify-start" style="width: 100%;">
						<view class="text-bold text-cut" style="min-width: 0;">{{item.title}}</view>
						<view class="hidden3">{{item.content}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				selectList: [{
					id: 0,
					title: '全部'
				}],
				selectCur: 0
			}
		},
		methods: {
			async getCategorys() {
				let {
					data
				} = await this.$h.api.articleModel.getCategorys()
				this.selectList = [...this.selectList, ...data]
				this.getList()
			},
			async getList(category_id) {
				let query = category_id ? {
					page: 1,
					size: 10,
					category_id
				} : {
					page: 1,
					size: 10,
				}
				let {
					data
				} = await this.$h.api.articleModel.getArticles(query)
				this.list = data.data
			},
			selectClick(index, id) {
				this.selectCur = index
				this.getList(id)
			}
		},
		onLoad() {
			this.getCategorys()
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page-system {
		padding-top: 100rpx;

		.select-box {
			width: 100%;
			min-height: 100rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;

			.select {
				width: 120rpx;
				height: 50rpx;
				background-color: $bgColor;
				border-radius: 25rpx;
				color: #000;

				&.active {
					color: #fff;
					background-color: $mainColor;
				}
			}
		}

		.cu-list.menu.sm-border.custom-list {
			.cu-item {
				height: 178rpx;
				padding: 0 20rpx;

				&::after {
					border-bottom: 2rpx solid $bgColor;
					left: 20rpx;
					width: calc(200% - 40px);
				}
			}
		}
	}
</style>
